const express = require('express');
const app = express();
const fs = require('fs');
const path = require('path');

// 创建index.html，请求的是根路径则将该html设置为首页
app.all('/', async (req, res, next) => {
  // 考虑性能问题真正的服务端不会使用readFile而是使用流
  const indexHtml = await fs.promises.readFile(path.resolve(__dirname, './index.html'));
  res.send(indexHtml.toString()); // 参数为字符串时自动设置Content-Type为text/html
});

// 创建main.js文件并在index.html中引入，请求的是/main.js路径则将返回该js内容
app.all('/main.js', async (req, res, next) => {
  res.sendFile(path.resolve(__dirname, './main.js'));
});

// 创建App.vue文件并在main.js中引入，请求的是/App.vue路径则将返回该vue文件编译后的js内容
app.all('/App.vue', async (req, res, next) => {
  // Vue编译实际上是比较复杂的过程，说白了就是进行一系列字符串解析和替换并调用Vue.createElement()等方法构建原生dom的过程，最终得到编译后的浏览器可识别的js文件
  
  // 此处不演示Vue编译过程，直接令vue文件内容为js
  res.sendFile(path.resolve(__dirname, './App.vue'), {
    headers: {
      'Content-Type': 'text/javascript'
    }
  });
});

app.listen(9000, () => {
  console.log('服务器9000启动成功');
});